<template>
	<view>
		<nav-bar type="transparentFixed"  title="人生模拟器" :scrollTop="scrollTop" transparentFixedFontColor="rgba(0, 0, 0, 0)">
			<view @tap="goback" slot="left" style="padding-left: 15px;">
				<u-icon name="arrow-left" :size="45"></u-icon>
			</view>
			<view @tap="goback" slot="transparentFixedLeft" style="padding-left: 15px;color: #FFFFFF;">
				<u-icon name="arrow-left" :size="45"></u-icon>
			</view>
			<!-- #ifdef H5 -->
			 <view slot="right">
				<u-icon name="download" :size="45" style="margin-right: 20px;"></u-icon>
				<u-icon name="zhuanfa" :size="45" style="margin-right: 20px;"></u-icon>
			</view>  
			<!-- #endif  -->
			<view slot="transparentFixedRight" style="color: #FFFFFF;">
				<u-icon name="download" :size="45" style="margin-right: 20px;"></u-icon>
				<u-icon name="zhuanfa" :size="45" style="margin-right: 20px;"></u-icon>
			</view>
		</nav-bar>
		
		<view class="status_bar">
			<view class="bg"></view>
			<view class="content" :style="'padding-top:'+vuex_systemInfo.statusBarHeight+'px'">
				<!-- #ifdef H5 -->
				<view style="height: 60rpx;"></view>
				<!-- #endif  -->
				<!-- #ifdef !H5 -->
				<view style="height: 20rpx;"></view>
				<!-- #endif  -->
				<view class="wrap">
					<view class="header">
						<image src="/static/delimg/1.jpg" mode="aspectFill"></image>
						<view class="header-content">
							<view class="booktitle">人生模拟器</view>
							<view class="bookcontent">
								九州月下
							</view>
							<view class="u-flex u-font-25">
								连载 <u-line color="#FFFFFF" direction="col" length='30' :hair-line="false" margin="0rpx 10rpx"></u-line>16万字
							</view>
							<view>
								<u-tag text="奇幻玄幻" type="info" mode="dark" size="mini" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="book-wrap">
			<u-grid :col="3" :border="false">
				<u-grid-item>
					<view style="font-weight: bold;font-size: 40rpx;">8.7</view>
					<u-rate :current="3.7" size="25" active-color="#ff9900" :disabled="true"></u-rate>
				</u-grid-item>
				<u-grid-item>
					<view style="font-weight: bold;font-size: 40rpx;">1880万</view>
					<text style="font-size: 25rpx;color:#909399">在读人数</text>
				</u-grid-item>
				<u-grid-item>
					<view style="font-weight: bold;font-size: 40rpx;">1880万</view>
					<text style="font-size: 25rpx;color:#909399">人气值</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="wrap" style="margin-top:80px;margin-left: 20rpx;">
			<view style="font-weight: bold;font-size: 33rpx;">内容简介</view>
			<view class="u-flex u-margin-top-30">
				<u-tag class="u-margin-right-10" text="奇幻玄幻" type="info" mode="dark" bg-color="#f4f4f5" color="#82848a"/>
				<u-tag class="u-margin-right-10" text="奇幻玄幻" type="info" mode="dark" bg-color="#f4f4f5" color="#82848a"/>
				<u-tag class="u-margin-right-10" text="奇幻玄幻" type="info" mode="dark" bg-color="#f4f4f5" color="#82848a"/>
			</view>
			<view style="padding: 10rpx;">
				<u-read-more style="height: auto;" :toggle="true" show-height="250">
					<rich-text :nodes="content"></rich-text>
				</u-read-more>
			</view>
			<view class="u-flex" @click="tabcatalog">
				<view class="u-flex-1" style="font-weight: bold;font-size: 33rpx;">目录</view>
				<u-section class="u-flex-6" color="#909399" :show-line="false" :bold="false" title="连载至114章" sub-title="查看更多"></u-section>
			</view>
		</view>

		<view v-show="catalog" class="group" style="animation-duration:0.2s;"
			:class="animation?'animation-catalog-bottom':'animation-reverse animation-slide-bottom'" 
			:style="{height: (vuex_systemInfo.windowHeight-100) +'px'}" @touchmove.stop.prevent="">
			<view class="header">
				<view class="title">目录</view>
				<view @click="tabcatalog">
					<u-icon class="close" name="close" size="28"></u-icon>
				</view>
			</view>
			<view class="content">
				<view style="position:absolute;left:40rpx;color:#2979ff;">共114章</view>
				<view style="position:absolute;right:40rpx;" @click="tabsore">
					<u-icon custom-prefix="icon-book" :name="sore?'daoxu':'zhengxu'" :label="sore?'倒序':'正序'" size="28" color="#2979ff" label-color="#2979ff"></u-icon>
				</view>
			</view>
			<mescroll-uni height="550px" @init="mescrollInit" :down="downOption" :up="upOption">
				<view style="padding:30rpx 30rpx;font-size:28rpx;font-weight: bold;color:#606266;" v-for="(item,index) in cataloglist">
					第{{index}}章 {{item.name}}
				</view>
			</mescroll-uni>
		</view>
		<u-gap height="30" bg-color="#f3f4f6"></u-gap>
		<view class="wrap" style="margin-left: 20rpx;">
			<view style="font-weight: bold;font-size: 33rpx;margin-bottom: 10rpx">第一章</view>
			<u-read-more style="height: auto;" :toggle="true">
				<rich-text :nodes="text"></rich-text>
			</u-read-more>
		</view>
		<view class="wrap" style="margin-left: 20rpx;">
			<view style="font-weight: bold;font-size: 33rpx;">版权信息</view>
			<view style="margin-top: 20rpx;color:#909399">本书的数字版权由“xxx小说网”提供并授权发行，如有任何疑问，请通过"我的-意见反馈"告知我们。</view>
		</view>
		<u-divider>我是有底线的</u-divider>
		<view style="height:200rpx;width: 100%;"></view>
		<view class="tabbar u-border-top u-flex tabbar_bottom">
			<view class="u-flex-7 u-text-center">
				<u-icon custom-prefix="icon-book" name="jiarushujia" size="40" label-size="30" label="加入书架" color="#2979ff" label-color="#2979ff"></u-icon>
			</view>
			<u-button @click="goread" class="u-flex-6" type="primary" shape="circle" style="margin: 10rpx;background-image: linear-gradient(45deg, #0081ff, #1cbbb4);">免费阅读</u-button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				scrollTop:0,
				animation:false,
				catalog: false,
				sore: true,
				content: `林昭穿越了，在一个天灾横行，人族势微的可怕世界。
但是问题不大，我有金手指！可以模拟未来！躲避灾祸，读档人生！每次模拟人生都能带回超越凡人的能力！`,
				text: `<br>　　天气晴朗，一朵孤单的白云静静地停在蔚蓝天空，像是一只慵懒的绵羊。<br><br>　　微风吹过平原，吹过平原上无尽的丛林，还有河边青草中偶尔露头的牛羊，以及绵延半个低矮山坡的木屋村落，将村中威严赞颂长诗的声音，传到更远的地方。<br><br>　　大树下，一名头戴着兽牙额饰、皱纹满面的巫祭正用威严唱颂着祖灵，在他身前，七八个粗布麻衣、戴着同款兽牙项链的少年正盘膝静坐，捧书静听，虔诚地沐浴祖先的荣光。<br><br>　　林昭就是这些少年里最年轻的一个，他眉目英挺，只是下巴上带着一点稚气的婴儿肥，头顶的短发冒出一缕，在微风里展示着他的桀骜。<br><br>　　相比周围少年那带着野性的古铜色肤色，他肤色白得像手里的骨书，斑驳的阳光洒在他身上，如同生出了微微的光。<br><br>　　嗯，好像没有人觉得我哪里不对！<br><br>　　林昭小心地的把手里那少说也有十来斤的白骨书放到膝上，不留痕迹地舒展了一下酸痛的手臂，如南郭先生一般，不时在祭司提高声调唱了祖先的神威时，发出一声声“战战战！”“大风、大风！”“灵威、灵威！”等呼喊，让整个场面更加庄严肃穆。<br><br>　　苦也！<br><br>　　没想到暑假没过，就已经提前感受摸鱼混子日的学习时光了。<br><br>　　林昭心中暗自叫苦，三年高考，五年模拟，前几日，他好不容易把六月七八这两日大劫成功渡过，清北虽然不敢想，但211稳过，甚至能报一些专业分不那么高的985。<br><br>　　美好生活就在眼前，但突然间就穿越了。<br><br>　　回想前日，林昭依然是愤恨不平，凭什么啊！<br><br>　　他就骑车回个乡下老家，结果就在一条无人的普通村道公路上，先是躲过了突然失控的泥头车、再发现端倪，又凶险避开山体滑坡，本来还感慨大难不死必后福，却在看认真看周围山势时突然天降陨石，察觉不对时，陨石已在抬头瞬间把他送走……<br><br>　　这苍天不讲武德，来骗，来偷袭，他不服啊！<br><br>　　等他从噩梦中醒来时，就发现自己躺在这村落里的屋宅中，穿了！<br><br>　　可这穿的又不完全！<br><br>　　说是身穿吧，他却穿着破旧麻衣，周围人都认识他，和善地唤他“昭”，他也能说一口以前完全没听过的语言。<br><br>　　说是魂穿吧，但他指尖那长年拿笔的细茧、还有高中三年少见阳光闷出来的白净皮肤、整齐洁白的牙齿，却与周围见过的所有村人格格不入。<br><br>　　更可怕的是，当时他从惶恐中走出门去不远，就在路口看到如今站在树下的巫师大人，拿着巫杖，面无表情地从火堆旁尤带血肉的骨架里抽出一条扭曲透明的东西，那玩意看起来非常像人，连痛苦恐慌的表情都栩栩如生，在挣扎哀嚎中，被巫杖顶端的骷髅张嘴如鲸鱼般吸入口中。<br><br>　　吸完那个和传说中的“灵魂”相似度极高的玩意后，巫杖上骷髅还张开的下颚，发出了三声让人毛骨悚然的“桀桀桀”。<br><br>　　林昭当场就吓懵了。<br><br>　　好在巫师大人并不介意，甚至都没抬头看他一眼，就提着沉重的巫杖，平静地离开了。<br><br>　　等巫师离开了好久，林昭才拖着已经软了的腿，跄踉地滚回房去，什么打听消息，什么翻箱倒柜，什么出村探查，什么一鸣惊人，见机行事通通被他按到心底。<br><br>　　他怂了。<br><br>　　好在，周围的人似乎没发现他的异常。<br><br>　　好在，今天一天，都是在这里听念经，并不算困难。<br><br>　　想到这，他又没忍住低头看手上那本白骨书。<br><br>　　书本用一张张像是贝壳的巨大骨片做成，用铜环锁成书本，一个个字体像是生物的骨头上自然生长的纹路，他的初穿越过来一日，记忆还不太清楚，却又能认出这些文字，像是刻入骨血一般。<br><br>　　《巫咸威德》，是一本语言简单的叙事书，开篇写的是上古之时，炎帝黄帝大战巫神蚩尤，蚩尤虽败，却牺牲自己，成功拖延时间，让九黎部族的十二位大巫师在大战中结成都天之阵，斩断山河大地，将九黎所在土地与山海大荒世界斩出，同一时间，大巫夸父追日，后羿射日，随后，从射下的九日里捡了一个尚且存活的大日，把山海大荒近一半的土地，从“那个世界分裂出来，自成一界，渡入星海，从此，九黎部族便不再受战火之苦，繁衍生息。<br><br>　　十二位大巫自此带着各自部族在“新世界”建立自己城池，成为十二位司辰神祇，执掌天地，划分时令，成为这个世界当之无愧的万物之主。<br><br>　　“这是交待背景故事么，剩下的呢？不是都几万年前的事了么？”<br><br>　　林昭在心里默默诽谤着，做为一个优秀的古文化爱好者，他来这的第一天就把这本书看完了，但书好像就写了这些故事，祭司每天也都讲的这些，后边几千几万年的历史呢？那么厚重的一书，只写了十分之一，剩下的都是空白，难道是故意弄重点，好锻炼我们这些学生的臂力么？<br><br>　　这时，祭祀已经赞颂完书里所有英雄，高举着巫杖，向正南方向跪拜过像征着六月的仲夏司辰后，便算今天的功课做完了。<br><br>　　林昭也随着众学徒向南跪拜六月司辰，便捧着自己的白骨书，跟着一起去村口的篝火处分享了一只长得像白马，但有一口鲨鱼牙的野兽。<br><br>　　白马的皮挂在一边的木杆上完完整整，在篝火上的肉身却已经头骨碎裂，一口鲨鱼牙整个爆开，像是被人生生捏碎了头骨。<br><br>　　五名头戴兽骨面具的，肌肉虬结的勇士静立一旁，他们恭敬地拜服祭司，双手奉上一把分肉的铜刀。<br><br>　　部落的巫接过利刃，他把嫩肉分给老者，筋腿分给青壮，内脏分给幼儿，分量大小不一，但族中百余人都没有异议，可见威望。<br><br>　　不多时，那野兽只剩下骨架。<br><br>　　林昭分到一块后腿肉，一斤左右，烤的半熟，没有盐，还带着血丝。<br><br>　　就当是五分熟的牛排了，林昭捧着肉啃了下去——在最能吃的年纪穿越到这地方，过去一天一夜了，他这才吃上第一口饭，就是生的他也能不加酱油地嚼下去。<br><br>　　但这没盐的肉，入口意外的好吃。<br><br>　　香！弹牙！自带盐味！肉丝里好像还有厚厚的油脂！<br><br>　　林昭差点吃出泪水来。<br><br>　　这算是一整天下来，他惶恐心灵得到的第二大安慰了。<br><br>　　三两口吃掉了肉，林昭看着剩下那些要用来占卜、刻咒、制矛、做针的巨大骨架，很想上去把脊髓嗦干净，但他用强大的毅力忍住了，兽魂在脊髓里，是不能嗦的，要等晚上抽出来了才能吃……<br><br>　　吃完后，族人散去，林昭也混迹在人群里，走到自己的家门。<br><br>　　他的家很特别，相比其它人的木屋，他的家是用白石垒成，四四方方，像个艺术品，连门都是一个长着独角的巨大兽首做成。<br><br>　　入门是青石地板，藤网做成吊床，除此之外，再无一物，说一句家徒四壁，不算夸张。<br><br>　　林昭在墙角放下白骨书，深吸一口气，盘膝坐在青石上，伸手遮住双眼。<br><br>　　下一秒，他面前出现一个血红的进度条。<br><br>　　进度条已跑完99%。<br><br>　　一行小字在进度条下方。<br><br>　　“人生模拟器，充能中，剩余时间，15分钟23秒。”<br><br>　　字是这里的甲骨文，数字用的是这里特殊的符号，连分秒都日换算过的本地时间。<br><br>　　但没有关系，这些都不重要！<br><br>　　林昭的心跳加快，健康光泽的肌肤间都升起一丝薄红。<br><br>　　这就是他穿越最大的惊喜，也是他到现在能维持心神的底气。<br><br>　　他的系统！快来了！<br><br>　　不就是分裂出去的世界么，三十年河西，三十年河东，等我成为大巫祖巫，破碎虚空，必然把你捏回去！<br><br>　　巫之颠，傲世间，有我林昭就有天！`,
				downOption: {
					use : false
				},
				upOption: {
					use : false
				},
				cataloglist: [
					{
						name:'金手指到来1'
					},
					{
						name:'金手指到来2'
					},
					{
						name:'金手指到来3'
					},
					{
						name:'金手指到来4'
					},
					{
						name:'金手指到来5'
					},
					{
						name:'金手指到来6'
					},
					{
						name:'金手指到来7'
					}
				]
			}
		},
		onShow() {
			console.log(123)
		},
		methods: {
			goback: function(e) {
				uni.navigateBack({
					delta: 1
				})
			},
			tabcatalog(){
				let that = this;
				if(!this.catalog){
					this.animation = true;
					this.catalog = true;
				}else{
					this.animation = false;
					setTimeout(()=>{
						that.catalog = false;
					},300)
				}
			},
			tabsore(){
				this.cataloglist = this.cataloglist.reverse();
				this.sore = !this.sore;
			},
			goread(){
				this.$u.route({
					url: 'pages/book/read'
				})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
		height: calc(var(--status-bar-height) + 200px); 
		width: 100%;
		overflow: hidden;
		.bg {
			width: 100%;
			height: 100%;
			background: url('/static/delimg/1.jpg');
			background-position: left;
			// background-size: cover;
			-webkit-filter: blur(2px);
			-moz-filter: blur(2px);
			-ms-filter: blur(2px);
			-o-filter: blur(2px);
			filter: blur(40px);
		}
		.content {
			position:absolute;
			top: calc(var(--status-bar-height));
		}
	}
	.wrap {
		padding: 18rpx;
	}
	.header {
		display: flex;
		height: auto;
		font-size: 32rpx;
		color: #FFFFFF;
		padding: 0rpx 35rpx;
		.header-content {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			.booktitle {
				font-family: sans-serif;
				font-size: 38rpx;
				font-weight: bold;
			}
			.bookcontent {
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
	.header image {
		width: 180rpx;
		height: 240rpx;
		border-radius: 8rpx;
		margin-left: 15rpx;
	}
	.book-wrap {
		margin-bottom: 15px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
		-webkit-box-shadow: #d4d2d2 0px 0px 10px;
		-moz-box-shadow: #d4d2d2 0px 0px 10px;
		
		position: absolute;
		display: flex;
		overflow:hidden;
		height: 160rpx;
		width: auto;
		margin-top: -15px;
		left: 30rpx;
		right: 30rpx;
		border-radius: 25rpx;
		background-color: #FFFFFF;
	}

	.group {
		position: fixed;
		top: calc(var(--status-bar-height) + 80px); 
		width: 100%;
		padding: 18rpx;
		overflow: hidden;
		background-color: #FFFFFF;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		z-index: 999;
		.header {
			justify-content:center;
			.title {
				color: #303133;
				font-size: 35rpx;
				font-weight: bold;
			}
			.close {
				color: #c0c4cc;
				position: absolute;
				right: 40rpx;
				padding-top: 10rpx;
			}
		}
		.content {
			padding: 30rpx 35rpx;
			margin-bottom: 30rpx;
		}
	}
	.tabbar {
		width: 100%;
		height: 55px;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
	}
</style>
